<script setup>
import { computed, onMounted, ref, onUnmounted, watch } from "vue";
import titleDiv from "@/components/titleDiv.vue";
import pageDiv from "@/components/page.vue";
// 引入swiper组件
import { useI18n } from "vue-i18n";
import { Swiper, SwiperSlide, useSwiper } from "swiper/vue";
// 引入swiper样式（按需导入）
import "swiper/css";
import "swiper/css/pagination"; // 轮播图底面的小圆点
import "swiper/css/navigation"; // 轮播图两边的左右箭头
import "swiper/css/scrollbar"; // 轮播图的滚动条
import "swiper/css/effect-cards";
import { useHead } from '@unhead/vue'
import {
  ElCarousel,
  ElCarouselItem,
  ElRow,
  ElCol,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElIcon,
} from "element-plus";
// 引入swiper核心和所需模块
import {
  Autoplay,
  Navigation,
  Pagination,
  Scrollbar,
  EffectCards,
  EffectCoverflow,
  A11y,
} from "swiper/modules";
const modules = [Autoplay, EffectCards, Pagination, Scrollbar, EffectCoverflow];
import imageList from "./image";
const fzref = ref(null);
const hzswiper = ref(null);
const swiperssss = useSwiper();
const setfzSwiper = ref(null);
const sethsSwiper = ref(null);
const { setLocale, locale, t } = useI18n();
useHead({
  title: t('head.title'),
  meta: [
    {
      name: 'description',
      content: t('head.description'),
    }, {
      name: 'keywords',
      content: t('head.keywords'),
    },
  ],
})
const currentLanguage = locale.value;
const allType = ref(locale.value=='en'?true:false)
const screenWidth = ref(window.innerWidth);
const creativeEffect = ref({
  prev: {
    translate: [-115, 0, 0], // 偏移量
    scale: 0.85, // 缩放量
    shadow: true, // 是否加阴影
  },
  next: {
    translate: [140, 0, 0],
    scale: 0.85,
    shadow: true,
  },
  limitProgress: Math.floor(9 / 2), // 显示五个堆叠的最重要的这个属性，后面依次以前面属性等比配置
  shadowPerProgress: true, //是否等比配置透明度
});
const menu = ref([
  {
    title: t("menu.title0"),
    subtitle: t("menu.subtitle0"),
    img: imageList.hs,
  },
  {
    title: t("menu.title1"),
    subtitle: t("menu.subtitle1"),
    img: imageList.fz,
  },
  {
    title: t("menu.title2"),
    subtitle: t("menu.subtitle2"),
    img: imageList.fs,
  },
  {
    title: t("menu.title3"),
    subtitle: t("menu.subtitle3"),
    img: imageList.ts,
  },
]);
const isPc = ref(true);
const hsActive = ref(0);
const hs = ref([
  {
    title: t("hs.list0.title"),
    src: imageList.hs1,
    text: t("hs.list0.text"),
    time: t("hs.list0.time"),
    addres: [
      t("hs.list0.addres1"),
      t("hs.list0.addres2"),
      t("hs.list0.addres3"),
      t("hs.list0.addres4"),
    ],
  },
  {
    title: t("hs.list1.title"),
    src: imageList.hs2,
    // srcf: imageList.hs1f,
    // srcen: imageList.hs1en,
    text: t("hs.list1.text"),
    time: t("hs.list1.time"),
    // addres: [
    //   t("hs.list1.addres1"),
    //   t("hs.list1.addres2"),
    //   t("hs.list1.addres3"),
    //   t("hs.list1.addres4"),
    // ],
  },
  {
    title: t("hs.list2.title"),
    src: imageList.hs3,
    // srcf: imageList.hs1f,
    // srcen: imageList.hs1en,
    text: t("hs.list2.text"),
    source: t("hs.list2.source"),
  },
  {
    title: t("hs.list3.title"),
    src: imageList.hs4,
    // srcf: imageList.hs1f,
    // srcen: imageList.hs1en,
    text: t("hs.list3.text"),
    list: [{
      name: t("hs.list3.list0.name"),
      value: t("hs.list3.list0.value"),
    },{
      name: t("hs.list3.list1.name"),
      value: t("hs.list3.list1.value"),
    },{
      name: t("hs.list3.list2.name"),
      value: t("hs.list3.list2.value"),
    }, ],
  },
]);
const activefz = ref(1);
const fzData = ref([
  {
    title: t("fz.list0.title"),
    text: t("fz.list0.text"),
    time: t("fz.list0.time"),
    but: t("fz.list0.but"),
    src1: imageList.fz1,
    src2: imageList.fs1f,
    src3: imageList.fs1en,
  },
  {
    title: t("fz.list1.title"),
    text: t("fz.list1.text"),
    time: t("fz.list1.time"),
    but: t("fz.list1.but"),
    src1: imageList.fz2,
    src2: imageList.fs2f,
    src3: imageList.fs2en,
  },
  {
    title: t("fz.list2.title"),
    text: t("fz.list2.text"),
    time: t("fz.list2.time"),
    but: t("fz.list2.but"),
    src1: imageList.fz3,
    src2: imageList.fs3f,
    src3: imageList.fs3en,
  },
  {
    title: t("fz.list3.title"),
    text: t("fz.list3.text"),
    time: t("fz.list3.time"),
    but: t("fz.list3.but"),
    src1: imageList.fz4,
  }
]);
const fsData = ref([
  {
    title: t("fs.list0.title"),
    text: t("fs.list0.text"),
    time: t("fs.list0.time"),
    color: 'rgba(162,37,31,0.21)',
    src1: {
      zh: imageList.fs1m,
      fa: imageList.fs1m,
      en: imageList.fs1m,
    },
  },
  {
    title: t("fs.list1.title"),
    text: t("fs.list1.text"),
    time: t("fs.list1.time"),
    color: 'rgba(51,31,162,0.21)',
    src1: {
      zh: imageList.fs2,
      fa: imageList.fs2f,
      en: imageList.fs2en,
    },
  },
  {
    title: t("fs.list2.title"),
    text: t("fs.list2.text"),
    time: t("fs.list2.time"),
    color: 'rgba(153,162,31,0.21)',
    src1: {
      zh: imageList.fs3,
      fa: imageList.fs3f,
      en: imageList.fs3en,
    },
  },
]);
const tsData = ref([
  {
    title: t("ts.list0.title"),
    text: t("ts.list0.text"),
    url: 'https://hk.londonermacao.com/macau-events-shows/harry-potter-exhibition.html',
    urlzh: 'https://www.londonermacaoresort.com/macau-events-shows/harry-potter-exhibition.html',
    urlen: 'https://www.londonermacao.com/macau-events-shows/harry-potter-exhibition.html',
    src1: {
      zh: imageList.ts1,
      fa: imageList.ts1f,
      en: imageList.ts1en,
    },
  },
  {
    title: t("ts.list1.title"),
    url: 'https://lum.macaotourism.gov.mo/page/Coloane_tc.html',
    urlzh: 'https://lum.macaotourism.gov.mo/page/Coloane_cn.html',
    urlen: 'https://lum.macaotourism.gov.mo/page/Coloane_en.html',
    text: t("ts.list1.text"),
    src1: imageList.ts2,
  },
  {
    title: t("ts.list2.title"),
    text: t("ts.list2.text"),
    url: 'https://tc.sandsresortsmacao.com/sands-lifestyle/macau-shows/teamlab.html',
    urlzh: 'https://www.sandsresortsmacao.com.cn/sands-lifestyle/macau-shows/teamlab.html',
    urlen: 'https://en.sandsresortsmacao.com/sands-lifestyle/macau-shows/teamlab.html',
    src1: imageList.ts3,
  },
  {
    title: t("ts.list3.title"),
    url: 'https://hk.londonermacao.com/macau-attractions.html',
    urlzh: 'https://www.londonermacaoresort.com/macau-attractions.html',
    urlen: 'https://www.londonermacao.com/macau-attractions.html',
    text: t("ts.list3.text"),
    src1: imageList.ts4,
  },
  {
    title: t("ts.list4.title"),
    text: t("ts.list4.text"),
    url: 'https://hk.londonermacao.com/macau-attractions.html',
    urlzh: 'https://www.londonermacaoresort.com/macau-attractions.html',
    urlen: 'https://www.londonermacao.com/macau-attractions.html',
    src1: imageList.ts5,
  },
  {
    title: t("ts.list5.title"),
    text: t("ts.list5.text"),
    url: 'https://hk.cotaiticketing.com/shows/samlee2024.html',
    urlzh: 'https://cn.cotaiticketing.com/shows/samlee2024.html?_vpctid=78223a51-5048-703c-8175-22c94c09afb5',
    urlen: 'https://www.cotaiticketing.com/shows/samlee2024.html?_vpctid=78223a51-5048-703c-8175-22c94c09afb5',
    src1: {
      zh: imageList.ts6,
      fa: imageList.ts6f,
      en: imageList.ts6en,
    },
  },
]);
if (
  navigator.userAgent.match(
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
  )
) {
  console.log("手机端");
  isPc.value = false;
}
function onSlideChange(index, prev) {
  console.log("slide change", index, prev);
  activefz.value = index;
}
function carouselPage(type) {
  console.log("carouselPage2222", setfzSwiper.value.realIndex);
  if (!type) return;
    if (type == "prev") {
        setfzSwiper.value.slidePrev();
    } else {
        setfzSwiper.value.slideNext();
    }
  // } else {
    // fzref.value[type]();
  // }
}
function carouselFsPage(type) {
  console.log('carouselFsPage1111',type, sethsSwiper.value.activeIndex)
  if(!sethsSwiper.value) return
  if (type == "prev") {
      sethsSwiper.value.slidePrev();
    // hsActive.value = activeNum >= hs.value.length - 1 ? 0 : activeNum + 1;
  } else {
      sethsSwiper.value.slideNext();
    // hsActive.value = activeNum <= 0 ? hs.value.length - 1 : activeNum - 1;
  }
}
function handleCommand(a) {
  console.log("handleCommand", a);
  changeLanguage(a);
}
function changeLanguage(lang) {
  localStorage.setItem("lang", lang);
  locale.value = lang;
  useHead({
    title: t('head.title'),
    meta: [
      {
        name: 'description',
        content: t('head.description'),
      }, {
        name: 'keywords',
        content: t('head.keywords'),
      },
    ],
  })
  location.reload();
}
function onSwiper(swiper) {
  sethsSwiper.value = swiper;
  console.log("onSwiper", sethsSwiper.value, swiper);
}
function onfzSwiper(swiper) {
  setfzSwiper.value = swiper;
  console.log("onSwiper", sethsSwiper.value, swiper);
}

function onhsSlideChange(a, b) {
  console.log("onSwiper", a, b);
}
//锚点跳转
function goAnchor(selector) {
  /*参数selector是id选择器（#anchor14）*/
  document.querySelector(`#page${selector}`).scrollIntoView({
    behavior: "smooth",
  });
}
function geTImg(data) {
  console.log("geTImg", data, currentLanguage);
  if (data && data[currentLanguage]) {
    return data[currentLanguage];
  } else {
    return data;
  }
}
function onResize(params) {
  screenWidth.value = window.innerWidth;
  if (
    navigator.userAgent.match(
      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
    )
  ) {
    console.log("手机端");
    isPc.value = false;
  } else {
    isPc.value = true;
  }
}
function hanldOpen(item) {
  if(currentLanguage == 'en') {
    window.open(item.urlen)

  }else if(currentLanguage == 'fa') {
    window.open(item.url)

  }else {
    window.open(item.urlzh)
  }
}
function onfzSlideChange(Swiper) {
  activefz.value =  setfzSwiper.value?setfzSwiper.value.realIndex:Swiper.activeIndex
  console.log('activefz',activefz.value)
}
onMounted(async () => {
  window.addEventListener("resize", onResize);
})
onUnmounted(() => {
  window.removeEventListener("resize", onResize);
})
</script>

<template>
  <div class="page" :class="locale+'page'">
    <div class="home" :class="isPc ? 'pchome' : 'mobilehome'">
      <div class="head">
        <img src="../src/assets/img/log.png" style="height: 100%" alt="" />
        <div class="pc" style="dis" v-if="isPc">
          <span
            :class="{ langAvtive: currentLanguage == 'zh' }"
            @click="changeLanguage('zh')"
            >简</span
          >
          <span
            :class="{ langAvtive: currentLanguage == 'fa' }"
            @click="changeLanguage('fa')"
            >繁</span
          >
          <span
            :class="{ langAvtive: currentLanguage == 'en' }"
            @click="changeLanguage('en')"
            >EN</span
          >
        </div>
        <div class="mobile" v-else>
          <el-dropdown @command="handleCommand" popper-class="mypopper">
            <div class="butmobile">
              <el-icon size="28" color="#fff"><Expand /></el-icon>
            </div>
            <!-- <span class="el-dropdown-link"> el-dropdown-link
            <el-icon size="28" color="#fff"><Expand /></el-icon> </span> -->

            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="zh">简体</el-dropdown-item>
                <el-dropdown-item command="fa">繁体</el-dropdown-item>
                <el-dropdown-item command="en">EN</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="banner">
        <img v-if="isPc" src="./assets/img/banner.png" alt="" />
        <img v-else-if="currentLanguage =='fa'" src="./assets/mobile/banner/bannerf.jpg" alt="" />
        <img v-else-if="currentLanguage =='en'" src="./assets/mobile/banner/banneren.jpg" alt="" />
        <img v-else src="./assets/mobile/banner/banner.jpg" alt="" />
        <div class="bannerInfo">
          <div class="content3">
            <div class="title">{{ t("menu.home.title") }}</div>
            <div class="text" :class="{allType:allType}">
              {{ t("menu.home.text") }}
            </div>
          </div>
          <div class="showAllText" v-if="allType">
            <div class="allTypeBg" ></div>
              <img @click="allType = false" src="../src/assets/img/all.png"  alt="">
          </div>
        </div>
      </div>
      <div class="menu content3">
        <div class="item" v-for="(item,index) in menu" :key="item.title" @click="goAnchor(index)">
          <img class="menuImg" :src="item.img" alt="" />
          <p class="menuText">{{ item.title }}</p>
        </div>
      </div>
      <titleDiv :title="menu[0].title" id="0" :subtitle="menu[0].subtitle" />
      <div class="hs content2">
        <pageDiv class="hsPage" @change="carouselFsPage" />
        <!-- <el-carousel
            ref="fzref"
            :interval="4000"
            type="card"
            :height="isPc ? '418px' : '420px'"
            @change="onSlideChange"
            indicator-position="none"
          >
            <el-carousel-item
              v-for="(item, index) in hs"
              :class="index == activefz"
              :name="index == activefz"
              :key="index"
            >
                      <img class="hsimg" :src="item.src" alt="" />
        <div class="right">
          <div class="hsTitle">{{ item.title }}</div>
          <div class="text">{{ item.text }}</div>
          <div class="time" v-if="item.time">
            <div class="lebale">日　　　期：</div>
            <div class="value">{{ item.time }}</div>
          </div>
          <div class="addres" v-if="item.addres">
            <div class="lebale">地点及时间：</div>
            <div class="value">
              <div v-for="ele in item.addres" :key="ele">{{ele}}</div>
            </div>
          </div>
          <div v-if="item.source" class="source">{{ item.source }}</div>
          <div class="list" v-if="item.list">
            <div class="listItem" v-for="ele in item.list" :key="ele.name">
              <div class="listTitle">{{ ele.name }}</div>
              <div class="listvalue">{{ ele.value }}</div>
            </div>
          </div>
        </div>
            </el-carousel-item>
          </el-carousel> -->
        <swiper
          v-if="hs.length"
          class="my-swiper"
          :modules="modules"
          :loop="true"
          :slides-per-view="1"
          :autoplay="{ autoplay: true, delay: 10000 }"
          :space-between="28"
          @slideChange="onhsSlideChange"
          @swiper="onSwiper"
        >
          <swiper-slide v-for="(item, index) in hs" :key="index">
            <div class="hsList">
              <img class="hsimg" :src="item.src" alt="" />
              <div class="right">
                <div class="hsTitle">{{ item.title }}</div>
                <div class="text">{{ item.text }}</div>
                <div class="time" v-if="item.time">
                  <div class="lebale">{{ t('menu.day') }}：</div>
                  <div class="value">{{ item.time }}</div>
                </div>
                <div class="addres" v-if="item.addres">
                  <div class="lebale">{{ t('menu.addres') }}：</div>
                  <div class="value">
                    <div v-for="ele in item.addres" :key="ele">{{ ele }}</div>
                  </div>
                </div>
                <div v-if="item.source" class="source">{{ item.source }}</div>
                <div class="list" v-if="item.list">
                  <div
                    class="listItem"
                    v-for="ele in item.list"
                    :key="ele.name"
                  >
                    <div class="listTitle">{{ ele.name }}</div>
                    <div class="listvalue">{{ ele.value }}</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="item-container" @click="addHomeJump(card)">
              <img class="item-img" :src="card?.imgUrl" :alt="card?.rname" />
              <h4 class="item-label">
                {{ card?.rname }}
              </h4>
            </div> -->
          </swiper-slide>
        </swiper>
        <!-- <div
        class="hsList"
        v-for="(item, index) in hs"
        v-show="hsActive == index"
        :key="item.title"
      >
        <img class="hsimg" :src="item.src" alt="" />
        <div class="right">
          <div class="hsTitle">{{ item.title }}</div>
          <div class="text">{{ item.text }}</div>
          <div class="time" v-if="item.time">
            <div class="lebale">日　　　期：</div>
            <div class="value">{{ item.time }}</div>
          </div>
          <div class="addres" v-if="item.addres">
            <div class="lebale">地点及时间：</div>
            <div class="value">
              <div v-for="ele in item.addres" :key="ele">{{ele}}</div>
            </div>
          </div>
          <div v-if="item.source" class="source">{{ item.source }}</div>
          <div class="list" v-if="item.list">
            <div class="listItem" v-for="ele in item.list" :key="ele.name">
              <div class="listTitle">{{ ele.name }}</div>
              <div class="listvalue">{{ ele.value }}</div>
            </div>
          </div>
        </div>
      </div> -->
      </div>
      <titleDiv :title="menu[1].title" id="1" :subtitle="menu[1].subtitle" />
      <div class="fz content1">
        <pageDiv class="fzpage" @change="carouselPage" />
        <div class="fzcontent">
          <div class="fzText" v-if="isPc">
            <div class="fztitle">
              {{ fzData[activefz] && fzData[activefz].title }}
            </div>
            <div class="text">
              {{ fzData[activefz] && fzData[activefz].text }}
            </div>
            <div class="fztime">
              {{ fzData[activefz] && fzData[activefz].time }}
            </div>
            <div class="but">
              {{ fzData[activefz] && fzData[activefz].but }}
            </div>
          </div>
          <div class="right">
            <!-- <el-carousel
              ref="fzref"
              :interval="40000"
              type="card"
              :height="isPc ? '418px' : '305px'"
              @change="onSlideChange"
              :initial-index="activefz"
              indicator-position="none"
            >
              <el-carousel-item
                v-for="(item, index) in fzData"
                :class="index == activefz"
                :name="index == activefz"
                :key="index"
              >
                <img class="fzImg" :src="item.src1" alt="" />
              </el-carousel-item>
            </el-carousel> -->
            <swiper
              class="my-swiper"
              style="height: 305px"
              :modules="[...modules, EffectCoverflow]"
              :slides-per-view="2.5"
              :centeredSlides="true"
              :cardsEffect="{
                rotate: false,
                perSlideOffset: 15,
                perSlideRotate: 0,
              }"
              height="305px"
              :autoplay="{ autoplay: true, delay: 10000 }"
              :space-between="-50"
              :loop="true"
              @slideChange="onfzSlideChange"
              @swiper="onfzSwiper"
            >
              <swiper-slide v-for="(item, index) in fzData" :key="index">
                <img class="fzImg" :src="item.src1" alt="" />
              </swiper-slide>
            </swiper>
          </div>
          <div class="fzText" v-if="!isPc">
            <div class="fztitle">
              {{ fzData[activefz] && fzData[activefz].title }}
            </div>
            <div class="text">
              {{ fzData[activefz] && fzData[activefz].text }}
            </div>
            <div class="fztime">
              {{ fzData[activefz] && fzData[activefz].time }}
            </div>
            <div class="but">
              {{ fzData[activefz] && fzData[activefz].but }}
            </div>
          </div>
        </div>
      </div>
      <titleDiv :title="menu[2].title" id="2" :subtitle="menu[2].subtitle" />
      <div class="fs content1">
        <el-row :gutter="isPc ? 33 : 0">
          <el-col
            :span="isPc ? 8 : 24"
            v-for="item in fsData"
            :key="item.title"
          >
            <div
              :class="isPc ? 'fsItem' : 'mobilefsItem'"
              :style="{ backgroundImage: `url(${geTImg(item.src1)})` }"
            >
              <div class="text" :style="{backgroundColor: item.color}">
                <div class="mbl">
                    <div class="fsTitle">{{ item.title }}</div>
                    <div class="fsText">{{ item.text }}</div>
                    <div class="time">{{ item.time }}</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <titleDiv :title="menu[3].title" id="3" :subtitle="menu[3].subtitle" />
      <div class="ts content1">
        <el-row :gutter="isPc ? 33 : 10">
          <el-col
            :span="isPc ? 8 : 12"
            v-for="item in tsData"
            :key="item.title"
          >
            <div class="tsItem" @click="hanldOpen(item)">
              <img :src="geTImg(item.src1)" alt="" />
              <div class="text">
                <div class="tsTitle">{{ item.title }}</div>
                <div class="tsText" v-if="isPc">{{ item.text }}</div>
                <div class="but" v-if="isPc">{{ t("menu.more") }}</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="foot" v-if="isPc"></div>
  </div>
</template>
<style lang="less" scoped>
.foot {
  width: 100%;
  height: 74px;
  background: #131313;
}
.mobilehome{
  .fzcontent{
    .right{
      width: 100vw !important;
      overflow: hidden;
      position: relative;
      left: -32px;
      .swiper-slide{
        scale: 0.839;
      }
      .swiper-slide-active{
        scale: 1;
        z-index: 100;
        width: 250px !important;
        left: -28px;
        
      }
      .is-active{
        position: relative;
        left: -8%;
        z-index: 11 !important;
      }
      .is-in-stage{
        z-index: 10;
      }
    }

    .is-active{
      width: 66% !important;
    }
  }
}
.home {
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  padding-bottom: 35px;
  overflow: hidden;
  .head {
    height: 45px;
    width: 100%;
    background: #000000;
    .pc {
      text-align: right;
      display: inline-block;
      position: absolute;
      right: 20px;
      top: 8px;
      span {
        cursor: pointer;
        margin-right: 6px;
        font-weight: 400;
        font-size: 17px;
        color: rgba(255, 255, 255, 0.54);
        line-height: 23px;
        text-align: right;
      }
      .langAvtive {
        font-weight: 400;
        font-size: 17px;
        color: #ffffff;
        line-height: 23px;
      }
    }
    .mobile {
      text-align: right;
      display: inline-block;
      position: absolute;
      right: 20px;
      top: 8px;

      .butmobile {
        display: inline-block;
        width: 30px;
      }
      .el-dropdown {
      }
    }
  }
  .hsPage {
    position: absolute;
    left: 565px;
    bottom: 22px;
    z-index: 10;
  }
  .fzpage {
    position: absolute;
    bottom: 0px;
    right: 50%;
  }
  .banner {
    img {
      width: 100%;
      height: 639px;
      object-fit: cover;
      vertical-align: middle;
    }
    .bannerInfo {
      background: #b00a0a;
      text-align: center;
      padding: 50px 0 38px 0;
      .text {
        font-weight: 300;
        font-size: 12px;
        color: rgba(255,255,255,0.9);
        line-height: 20px;
        text-align: justify;
        margin-top: 21px;
      }
      font-size: 20px;
      color: rgba(255,255,255,0.9);
      line-height: 18px;
    }
  }
  .menu {
    display: flex;
    align-items: center;
    .item {
      width: 217px;
      line-height: 217px;
      height: 217px;
      position: relative;
      flex: 1;
      margin: 100px 0 0 0;
      cursor: pointer;
      img {
        width: 199px;
        height: 100%;
        object-fit: cover;
      }
      .menuText {
        position: absolute;
        top: 0;
        width: 100%;
        font-size: 18px;
        color: #FFFFFF;
        line-height: 32px;
        text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
      }
    }
  }
  .hs {
    position: relative;
    padding: 23px 0 30px 0;
    .hsList {
      display: flex;
      .hsimg {
        width: 598px;
        height: 410px;
        margin-right: 50px;
      }
      .right {
        width: 553px;
        padding: 14px 0px 13px 0;
        text-align: left;

        .hsTitle {
          font-weight: 500;
          font-size: 18px;
          color: #000000;
          line-height: 25px;
          font-style: normal;
          margin: 0px 0 10px 0;
          text-align: center;
        }
        .text {
          // min-height: 120px;
          margin-bottom: 15px;
        }
        .time,
        .source {
          // margin-top: 15px;
        }
        .addres,
        .time {
          display: flex;
          font-weight: 400;
          font-size: 13px;
          color: #000002;
          line-height: 17px;
          .lebale {
            width: 85px;
            margin-right: 5px;
            font-size: 12px;
            color: #333333;
            line-height: 17px;
            margin-bottom: 8px;
          }
          .value {
            width: calc(100% - 150px);
            margin-bottom: 8px;
            text-align: left;
            div{
            margin-bottom: 8px;
            }
          }
        }
        .list {
          .listItem {
            // margin-top: 11px;
            .listTitle {
              font-weight: 400;
              font-size: 13px;
              color: #000002;
              margin-bottom: 8px;
              line-height: 17px;
            }
            .listvalue {
              font-weight: 400;
              font-size: 13px;
              color: #000002;
              margin-bottom: 8px;
              line-height: 17px;
            }
          }
        }
      }
    }
    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 90px;
      height: 84px;
    }

    &::before {
      top: -5px;
      right: -5px;
      border-top: 4px solid #b00a0a;
      border-right: 4px solid #b00a0a;
    }

    &::after {
      right: -5px;
      bottom: -5px;
      border-bottom: 4px solid #b00a0a;
      border-right: 4px solid #b00a0a;
    }

    // &:hover::before,
    // &:hover::after {
    //   width: calc(100% + 6px);
    //   height: calc(100% + 6px);
    // }
  }

  .fz {
    .fzcontent {
      display: flex;
      align-items: center;
      text-align: left;
      .fzText {
        width: 552px;
        margin-right: 100px;
        .text {
          margin: 33px 0 17px 0;
        }
        .fztime {
          margin-bottom: 60px;
        }
        .fztitle {
          font-size: 23px;
          color: #000000;
          line-height: 33px;
        }
      }

      .right {
        width: 800px;
        overflow: hidden;
        .fzImg {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 20px;
        }
      }
    }
  }
  .fs {
    height: 547px;
    .fsItem {
      height: 511px;
      background-repeat: no-repeat;
      background-size: auto 547px;
      border-radius: 25px;
      padding: 18px 28px;
      position: relative;
      .text {
        transition: all 0.5s;
        color: #ffffff;    
        position: absolute;
        bottom: 25px;
        border-radius: 25px;
        top: calc(100% - 128px);
        width: calc(100% - 90px);
        .mbl{
          padding: 33px 15px;
          backdrop-filter: blur(10px);
          width: 100%;
          height: calc(100% - 66px);
          position: relative;
        }
        .fsText,
        .time {
          display: none;
        }
        .time{
          position: absolute;
          bottom: 20px;
          width: 100%;
        }
        .fsTitle {
          font-weight: 500;
          font-size: 24px;
          line-height: 35px;
        }
      }
      &:hover {
        .text {
          border-radius: 8px;
          padding: 20px 0 0 0;
          height: calc(100% - 40px);
          font-size: 17px;
          line-height: 33px;
          border-radius: 8px;
          top: 0;
          .fsText {
            max-height: 315px;
            text-align: left;
            padding-top: 42px;
            display: block;
            // overflow: hidden; /* 隐藏超出容器的内容 */
            // text-overflow: ellipsis;
            // white-space: nowrap; /* 设置文本不换行 */
          }
          .time {
            display: block;
            text-align: left;
          }
        }
      }
    }
  }
  .ts {
    border-radius: 8px;
    img {
      border-radius: 25px;
    }
    .tsTitle {
      font-size: 23px;
      color: #000000;
      line-height: 33px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .tsItem {
      font-size: 23px;
      color: #000000;
      line-height: 33px;
      margin-bottom: 23px;
      align-items: flex-start;
      cursor: pointer;
      img {
        vertical-align: middle;
        width: 100%;
        height: 310px;
        object-fit: cover;
      }
      &:hover {
        box-shadow: 0px 2px 19px 0px rgba(0, 0, 0, 0.33);
        border-radius: 25px;
      }
      .text {
        font-size: 15px;
        color: #000002;
        line-height: 28px;
        padding: 27px 20px 32px 20px;
        .tsText {
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          min-height: 56px;
        }
        .tsText {
          margin: 16px 0 28px 0;
        }
      }
    }
  }
  .but {
    padding: 9px 32px;
    min-width: 132px;
    display: inline-block;
    border: 2px solid #da3616;
    color: #da3616;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 15px;
    color: #000002;
    line-height: 21px;
    text-align: center;
  }
  .content1 {
    max-width: 1422px;
    position: relative;
    margin: 0 auto;
  }
  .content2 {
    max-width: 1265px;
    margin: 0 auto;
    position: relative;
  }
  .content3 {
    max-width: 1088px;
    position: relative;
    margin: 0 auto;
  }
  @media screen and (max-width: 768px) {
    .but {
      padding: 8px 12px;
      font-weight: 400;
      font-size: 11px;
      color: #BA0A14;
      line-height: 15px;
    }
    .head {
      height: 44px;
    }
    .banner {
      img {
        width: 100%;
        height: 225px;
        vertical-align: middle;
      }
      .bannerInfo {
        padding: 23px 16px;
      }
    }
    .menu {
      margin: 35px 16px 0 16px;
      .item {
        width: 80px;
        height: 80px;
        line-height: 80px;
        margin: 0;
        img {
          width: 80px;
          height: 80px;
          object-fit: cover;
        }
        .menuText {
          font-weight: 500;
          top: 24px;
          font-size: 18px;
          color: #ffffff;
          line-height: 25px;
          text-shadow: 0px 1px 2px rgba(74, 0, 0, 0.5);
        }
      }
    }

    .hsPage {
      position: absolute;
      left: calc(50% - 33px);
      bottom: -53px;
    }
    .fzpage {
      right: 32px;
    }
    .hs {
      margin: 0 16px 53px 16px;
      &::before,
      &::after {
        content: "";
        position: absolute;
        width: 54px;
        height: 54px;
      }

      &::before {
        top: -5px;
        left: -5px;
        border-top: 2px solid #b00a0a;
        border-left: 2px solid #b00a0a;
        border-right: none;
      }

      &::after {
        right: -5px;
        bottom: -5px;
        border-bottom: 2px solid #b00a0a;
        border-right: 2px solid #b00a0a;
      }
      .hsList {
        display: block;
        padding: 0 22px;
        .hsimg {
          width: 100%;
          height: 254px;
          object-fit: cover;
        }
        .right {
          width: 100%;
          .text{
              font-size: 14px;
          }
          .addres {
            .value {
              width: calc(100% - 80px);

            }
          }
          .value, .source {
              font-weight: 400;
              font-size: 12px;
              color: #333333;
          }
           .listvalu, .listTitle{
              font-weight: 400;
              font-size: 12px;
              color: #333333;
           }
        }
      }
      .hsTitle{}
    }
    .fz {
      padding: 0 32px;
      .fzcontent {
        display: block;
        .right {
          width: 400px;
          overflow: hidden;
          .fzImg {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 15px;
          }
        }
        .fzText {
          width: 100%;
          font-weight: 400;
          min-height: 300px;
          font-size: 14px;
          color: #000002;
          line-height: 25px;
          position: relative;
          .fztitle {
            font-weight: 500;
            font-size: 14px;
            color: #000002;
            line-height: 25px;
            margin: 13px 0 10px 0;
          }
          .text {
            margin: 0 0 15px 0;
          }
          .fztime {
            font-size: 12px;
            margin-bottom: 15px;
          }
          .but{
            position: absolute;
            bottom: 0;
            border: 1px solid #DA3616 !important;
          }
        }
      }
    }
    .fs {
      width: calc(100% - 32px);
      height: auto;
      .mobilefsItem {
        height: 200px;
        background-size: 100% auto;
        margin-bottom: 13px;
        padding: 13px 10px;
        background-repeat: no-repeat;
        border-radius: 25px;
        position: relative;
        .text {
          transition: all 0.5s;
          color: #ffffff;
          position: absolute;
          border-radius: 5px;
          font-weight: 500;
          font-size: 18px;
          line-height: 25px;
          bottom: 20px;
          width: calc(100% - 20px);
          text-align: left;
          .mbl{
            padding: 12px 0 18px 0;
            backdrop-filter: blur(5px);
          }
          .fsText,
          .time {
            display: none;
          }
          .fsTitle {
            font-weight: 500;
            font-size: 24px;
            line-height: 35px;
            padding: 0 15px;
          }
        }
        .fztitle {
          font-weight: 500;
          font-size: 18px;
          color: #ffffff;
          line-height: 25px;
        }
      }
    }
    .ts {
      width: calc(100% - 32px);
      .tsItem {
        img {
          height: 115px;
          border-radius: 15px;
        }

        .text {
          padding: 10px 0 0px 0;
        }
      }
      .tsTitle {
        font-size: 14px;
        color: #000000;
        line-height: 20px;
      }
    }
  }
}
</style>
<style lang="less">
@media screen and (prefers-color-scheme: dark) {
  .mobilehome {
    color: #fff;
    .head {
      color: #fff;
    }
    .addres,
    .time,
    .fzText,
    .hsTitle,
    .fztitle,
    .listItem,
    .listTitle,
    .value,
    .text,
    .lebale,
    .listvalue,
    .tsTitle {
      color: #fff !important;
    }
  }
}
.enpage{
  .hsList{
    .right{
      max-height: 300px;
      overflow-y: auto;
      .time, .addres{
        width: 100% !important;
        display: block !important;
        .value, .lebale{
          width: 100% !important;
        }
      }
    }
  }
  .bannerInfo{
    padding-bottom: 40px !important;
    position: relative;
    .title{
        font-weight: 500;
        font-size: 20px;
        color: rgba(255,255,255,0.9);
        line-height: 18px;
    }
    .text{
      text-align:inherit;
      font-weight: 300;
      font-size: 12px !important;
      margin-top: 21px !important;
      color: rgba(255,255,255,0.9);
      line-height: 20px !important;
    }
    .showAllText{
      position: absolute;
      width: calc(100% - 32px);
      text-align: center;
      bottom: 10px;
      .allTypeBg{
        height: 40px;
        width: 100%;
        background: linear-gradient( 180deg, rgba(176,10,10,0.24) 0%, #B00A0A 100%);
      }
          img{
      width: 12px;
      height: 13px;
    }
    }
  }
  .allType{
    height: 126px;
    overflow: hidden;
  }
}
</style>
